<template>
  <toptitle @submit="getData"></toptitle>
  <section>
    <optionVue
      status="未完成"
      @edit="edit1"
      @editShow="editShow1"
      @del="del1"
      :arr="arr"
    ></optionVue>
    <optionVue status="已完成" :arr="arr"></optionVue>
  </section>
  <footerVue @delAll="delAll"></footerVue>
</template>
<script setup>
import footerVue from "./components/footer.vue";
import toptitle from "./components/toptitle.vue";
import optionVue from "./components/option.vue";

import { computed, reactive,emits } from "vue";
let arr = reactive([]);
const getData = (val) => {
  arr.push(val);
};
const editShow1 = (val) => {
  arr[val.index].show = val.show;
};
const edit1 = (val) => {
  arr[val.index] = val.obj;
};
const del1 = (val) => {
  arr.splice(val, 1);
};
const delAll = () => {
  arr.splice(0);
};
</script>

<style scoped></style>
